<% @page_title = "AWS Regions" %>

<%== part(
  "components/page_header",
  right_items: (!@locations.empty? && has_project_permission("Location:create")) ? [
    part("components/button", text: "Create AWS Region", link: "#{@project_data[:path]}/private-location/create")
  ] : []
) %>

<div class="grid gap-6">
  <%== part(
      "components/table_card",
      headers: ["Name", "AWS Region"],
      rows: @locations.map do |l|
        [
          [
            [l.ui_name, {link: @project_data[:path] + l.path}],
            [l.name]
          ],
          { id: "region-#{l.id}" }
        ]
      end,
      empty_state: {
        icon: "hero-map-pin",
        title: "No AWS Regions",
        description: "You don't have permission to create AWS Regions.",
      }.merge(has_project_permission("Location:create") ? {
        description: "Get started by creating a new AWS Region.",
        button_link: "#{@project_data[:path]}/private-location/create",
        button_title: "Create AWS Region"
      } : {})
    ) %>
</div>
